<!--
 * @LastEditors: YuSeen 2290515673@qq.com
 * @LastEditTime: 2022-08-21 15:43:55
-->
<template>
    <div class="my-6 songListDetail">
        <!-- 头部 -->
        <div class="flex w-full px-5 header">
            <div class="mr-4 w-44 h-44">
                <a-image :src="detail?.coverImgUrl" class="rounded" :preview="false" />
            </div>
            <div style="width: calc(100% - 212px);">
                <div class="flex-c">
                    <span
                        class="px-1 mr-4 border rounded-sm border-theme-color text-theme-color trans text-13"
                    >歌单</span>
                    <span class="text-2xl font-bold text-main-text-color">{{ detail.name }}</span>
                </div>
                <div class="mt-2 flex-c">
                    <a-image :src="detail?.creator?.avatarUrl" :width="24" style="margin-right: 8px;" class="rounded-full" />
                    <span class="mx-2 text-13 text-link-color">{{ detail.creator.nickname }}</span>
                    <span>{{ unixToYMD(detail.createTime) }}创建</span>
                </div>
                <div class="flex header-btns">
                    <button @click="playAll">
                        <SvgIcon name="play-icon" />
                        <span>播放全部</span>
                    </button>
                    <button class>
                        <SvgIcon name="add-collect-icon2" />
                        <span>收藏({{ numberAddUnit(detail.subscribedCount) }})</span>
                    </button>
                    <button class>
                        <SvgIcon name="share-icon" />
                        <span>分享({{ numberAddUnit(detail.shareCount) }})</span>
                    </button>
                    <button class>
                        <SvgIcon name="download-icon" />
                        <span>下载全部</span>
                    </button>
                </div>
                <div class="mt-2 text-13">
                    标签：
                    <span
                        class="text-link-color"
                        v-html="keywordHighLight(detail.tags.join(' / '), '/', '#ccc')"
                    ></span>
                </div>
                <div
                    class="mt-px text-13"
                >歌曲：{{ detail.trackCount }} 播放：{{ numberAddUnit(detail.playCount) }}</div>
                <div class="mt-px text-13 flex-b" :class="{ 'h-8': !showDetail }">
                    <div class="flex">
                        <span class="whitespace-nowrap">简介：</span>
                        <pre
                            class="overflow-hidden break-words whitespace-pre-wrap text-sub-text-color"
                        >{{ detail.description }}</pre>
                    </div>
                    <SvgIcon
                        name="triangle"
                        size="13"
                        class="text-sub-text-color"
                        :style="{ transform: showDetail ? 'rotate(-180deg)' : null }"
                        @click="showDetail = !showDetail"
                    />
                </div>
            </div>
        </div>

        <!-- tab栏 -->
        <div class="tabs"></div>

        <MyTable :tableData="songList" :columns="columns">
            <template #name="{ scope }">
                <span class="cursor-pointer" v-html="getSongName(scope.name, scope.alia)"></span>
            </template>
            <template #singer="{ scope }">{{ getSingers(scope.ar) }}</template>
            <template #album="{ scope }">{{ scope.al.name }}</template>
            <template #time="{ scope }">{{ getSongTime(scope.dt) }}</template>
        </MyTable>
    </div>
</template>

<script lang='ts' setup>
import { ref, watchEffect } from 'vue';
import { useRoute } from 'vue-router'
import { getSongListDetail, getSongListSongs } from '@/service/api/songList/songList'
import { useTime } from '@/hooks/time/useTime'
import { numberAddUnit } from '@/utils/util'
import { useView } from '@/hooks/view/useView'
import SvgIcon from '@/components/svgIcon/svgIcon.vue';
import MyTable from '@/components/table/myTable.vue';
import { IColumn } from '@/components/table/types';
import { IAllObject } from '@/types/base';
import { useSong } from '@/hooks/song/useSong';
import { usePlay } from '@/hooks/play/usePlay'

const route = useRoute()
const { playMusic, playSongList } = usePlay()
const { keywordHighLight } = useView()
const { unixToYMD } = useTime()
const { getSongName, getSingers, getSongTime } = useSong()

// 默认的详情数据
const defaultDetail = {
    coverImgUrl: '',
    shareCount: '',
    playCount: '',
    trackCount: '',
    subscribedCount: '',
    tags: [],
    createTime: new Date().getTime(),
    creator: {
        avatarUrl: '',
    }
}

// 歌单详情
const detail = ref<any>(defaultDetail)

const songList = ref([])

// 请求数据
watchEffect(async () => {
    const id = route.query?.id as unknown as number
    detail.value = defaultDetail
    const detailData = await getSongListDetail(id)
    detail.value = detailData.playlist
    songList.value = []
    const songListData = await getSongListSongs(id)
    songList.value = songListData.songs

})

// 点击歌曲名称,播放音乐
const titleClick = (row: IAllObject) => {
    playMusic(row.id)
}

// 表格
const columns: IColumn[] = [
    {
        label: '标题',
        prop: 'name',
        flex: 5,
        class: 'text-main-text-color',
        dbClick: titleClick
    },
    {
        label: '歌手',
        prop: 'singer',
        flex: 2
    },
    {
        label: '专辑',
        prop: 'album',
        flex: 3
    },
    {
        label: '时长',
        prop: 'time',
        flex: 1
    }
]

// 是否展开详情
const showDetail = ref(false)

// 播放全部
const playAll = () => {
    playSongList(route.query?.id as unknown as number)
}
</script>

<style scoped lang='scss'>
.header-btns {
    @apply flex mt-2;
    button {
        @apply flex items-center px-4 h-8 text-sub-text-color rounded-full border border-sub-border-color mr-3;
        span {
            @apply pl-1;
        }
        &:first-child {
            @apply bg-theme-color border-none text-white;
        }
    }
}
</style>